<template>
  <div>
   <!-- <el-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
      <el-icon slot="prefix" type="cluster" title="部门选择控件"/>
      <el-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </el-input>-->
    <el-input @click.native="openModal" placeholder="请选择部门" v-model="departNames" class="input-with-select" readOnly :disabled="disabled">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>

  <dept-select-dialog
    ref="innerDetSelectDialog"
    :multiple="multiple"
    @confirmSelect="confirmSelect"
    :nofathersonrelate="nofathersonrelate"
    :depart-id="departIds">

  </dept-select-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import deptSelectDialog from "./dialog/deptSelectDialog";

    export default {
      name: "deptSelect",
      components: {
        deptSelectDialog
      },
      props:{
        disabled:{
          type: Boolean,
          required: false,
          default: false
        },
        multiple:{//默认为单选
          type: Boolean,
          required: false,
          default: false
        },
        value:{
          type:String,
          required:false,
          default:""
        },
        nofathersonrelate:{//默认严格的遵循父子不互相关联
          type:Boolean,
          required:false,
          default:true
        },
      },
      data() {
        return {
          loading: true,
          title: "部门选择",
          open: false,
          // 部门树选项
          deptOptions: [],
          deptArray: undefined,
          deptId:"",
          departNames:"",
          departIds:''

        }
      },
      mounted(){
        this.departIds = this.value;

      },
      watch:{
        value(val){
          this.departIds = val;
        }
      },
      created() {
        this.getTreeselect();
      },
      methods: {
        confirmSelect(selectIds, selectNames){
          this.departIds = selectIds;
          this.departNames = selectNames;
          this.$emit("confirmSelect", selectIds, selectNames);
        },
        openModal(){
          this.$refs.innerDetSelectDialog.show()
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
          let that = this;
          treeselect().then(response => {
            that.deptOptions = response.data;
            that.deptArray = [];
            if(that.deptOptions && that.deptOptions.length > 0){
              that.getAllDeptByDeptTree(that.deptOptions);
            }
            this.$refs.innerDetSelectDialog.initData(this.deptOptions, this.deptArray)
          });
        },
        getAllDeptByDeptTree(deptOpt){
          let that = this;
          for(let item of deptOpt){
            that.deptArray.push(item);
            if(item.children && item.children.length > 0){
              that.getAllDeptByDeptTree(item.children);
            }
          }
        },


      },

    }
</script>

<style scoped>

</style>
